<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.forEach   return不会终止循环的
        // 2.for…in 
        // for...in 是 ES5 标准，适用于可枚举的数据，如数组、对象、字符串
        // 此方法遍历数组效率低，主要是用来循环遍历对象的属性。
        // 遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串。

        // 3.for…of 是 ES新增的方法，是适用于可迭代的数据，如数组、字符串、Map、Set
        // 不能遍历普通的对象,会报错（ obj is not iterableat）
        // 4.Object.keys()  遍历对象的属性，返回属性组成的数组。



        const arr = [5, 1, 3, 7, 4]
        arr.forEach((element, index) => {
            if (element < 2) return
            console.log('索引:', index, `值:${element}`);
            arr[5] = 0
        });
        console.log(arr);
        // 打印结果：
        // 索引：0，数值：5
        // 索引：2，数值：3
        // 索引：3，数值：7
        // 索引：4，数值：4
        // [5, 1, 3, 7, 4, 0]

        // for...in
        let arr2 = ['a', 'b', 'c', 'd']
        let obj2 = {
            name: 'hrw',
            age: 18
        }
        Array.prototype.a = 'e'
        for (let i in arr2) {
            // console.log(i); //key:0,1,2,3
            console.log(arr2[i]); //value:a,b,c,d,e
        }
        for (let i in obj2) {
            // console.log(i); //name,age
            console.log(arr2[i]); //undefined
        }
        // for…of
        console.log(Object.getOwnPropertyDescriptors(obj2));
        console.log(arr2[Symbol.iterator]().next()); //{value: 'a', done: false}
        console.log(arr2[Symbol.iterator]().next()); //{value: 'b', done: false}
        //Object.keys
        const obj = {
            p1: 123,
            p2: 456
        };
        console.log(Object.keys(obj)) //['p1','p2']

    </script>
</body>

</html>